<template>
  <!--增加地址-->
  <div class="ziliao">
    <wv-group title="收件人姓名">
      <wv-input placeholder="请输入收件人姓名" v-model="address.userName"></wv-input>
    </wv-group>
    <wv-group title="手机号">
      <wv-input placeholder="请输入手机号" v-model="address.mobile" type="number" :maxlength="11" ></wv-input>
    </wv-group>
    <div class="guoji">
      <p>所在地区</p>
      <p @click="toAddress" v-model="address.area=city">{{city}} <span><img :src="pic" alt="" height="12">
        <!--<span @click.stop="addInp=false" @click="goLocation()">自动定位</span>--></span></p>
    </div>
    <v-distpicker type="mobile" static-placeholder @selected='selected' v-show="addInp" province="" city="" area=""
                  address-container="address-container"></v-distpicker>
    <wv-group title="详细地址">
      <wv-textarea placeholder="请输入详细地址，如“三里屯小区5号楼3楼" :rows="6" show-counter max-length="500"
                   v-model="address.addressInfo"></wv-textarea>
    </wv-group>
    <div class="delete" v-if="type==2">
      <img src="../../../assets/del.png" width="25" height="25" @click="goDelAddress(address.addressId)">
      <p>删除</p>
    </div>
    <p class="offer" @click="goSubmitAddress(address)">保存</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import VDistpicker from 'v-distpicker'
  import {addAddressInfo, addressDetailinfo, delAddress} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'wanshanziliao',
    props: {},
    data() {
      return {
        src: require('../../../assets/arrow.png'),
        img: require('../../../assets/close.png'),
        pic: require('../../../assets/right.png'),
        city: '请选择',
        addInp: false,
        address: {},
        type:1,
        isDel: false
      };
    },
    methods: {
      onChange(picker, value) {
        console.log(value)
      },
      openPicker(ref) {
        this.$refs[ref].open()
      },
      toAddress() {
        this.addInp = true;
      },
      // 省市区三级联动
      selected(data) {
        this.addInp = false;
        this.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
      },
      getAddressInfo(params) {
        addressDetailinfo(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.address = res.object;
            this.city=this.address.area;
          }
        })
      },
      goDelAddress(addressId){
        this.isDel=true;
        delAddress({addressId:addressId}).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.address = {};
          }
        })
      },
      checkFrom: function (address) {
        let msg = {};
        if (this.$myUtils.isNull(address.userName)) {
          msg['result'] = false;
          msg['info'] = '请填写收件人姓名';
          return msg;
        }
        if (this.$myUtils.isNull(address.mobile)) {
          msg['result'] = false;
          msg['info'] = '请填写收件人手机号';
          return msg;
        }
        if (this.$myUtils.isNull(address.area)) {
          msg['result'] = false;
          msg['info'] = '请选择城市';
          return msg;
        }
        if (this.$myUtils.isNull(address.addressInfo)) {
          msg['result'] = false;
          msg['info'] = '请填写详细地址';
          return;
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
      goSubmitAddress(address) {
        let checkResult = this.checkFrom(address);
        console.log(checkResult);
        if (!checkResult.result) {
          Toast.text(checkResult.info);
          return;
        }
        addAddressInfo(address).then(res => {
          if (res.code == 100) {
            this.$router.push({path: '/changyong', query: {activeIndex: 1}})
          } else {
            Toast.fail(res.info)
          }
        })
      }
    },
    created() {
      let type = this.$route.query.type;
      this.type=type;
      if (type == 2 & this.isDel==false) {
        let addressId=this.$route.query.addressId;
        this.getAddressInfo({addressId:addressId});
      }
    },
    components: {
      VDistpicker
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">

  .distpicker-address-wrapper {
    height: 300px;
    overflow: auto;
  }

  .guoji {
    text-align: left;
    padding: 10px 15px 10px;

    p:first-child {
      color: #2e94f0;
      font-size: 14px;
    }

    p:last-child {
      font-size: 17px;
      border-bottom: 1px solid #eee;
      padding: 10px 0;
      color: #666;

      img {
        margin: 9px 5px 0;
      }

      > span {
        color: #2d93f0;
        font-size: 12px;
        float: right;
      }
    }
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }

  .bg {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 50px;
  }

  .model .modelContent {
    background-color: #fff;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -43%;
    margin-top: -111px;
    z-index: 2;
    padding: 30px 10px 20px;
    width: 80%;

    img {
      position: absolute;
      right: 10px;
      top: 10px
    }

    .list {
      height: 100px;
      overflow-y: auto;
      margin-bottom: 20px;
      padding-bottom: 10px;
      text-align: left;
      padding-left: 20px;

      ul {
        overflow: hidden;

        li {
          line-height: 30px;
        }
      }
    }

    .btn {
      button {
        height: 42px;
        line-height: 42px;
        color: #fff;
        outline: none;
        border: none;
        width: calc(50% - 20px);
        border-radius: 8px;
      }

      :first-child {
        background-color: #ccc;
        margin-right: 20px;
      }

      :last-child {
        background-color: #2f95f0;
      }
    }
  }
</style>
